<template>
  <div class="page">
    <div class="flex text-right text-black">
      <input class="border" type="file" ref="fileId" accept=".xlsx,.xls" />
      <a-button class="ml-5" @click="upload()" type="primary"
        >导入Excel</a-button
      >
    </div>
    <div class="mt-10">
      <a-table :columns="columns" :data="users" />
    </div>
  </div>
</template>

<script setup lang="jsx">
import { ref, onMounted } from "vue";

import { importExcel, findUsers, delUser } from "@/apis/user";
const columns = [
  { title: "姓名", dataIndex: "userName" },
  { title: "学号", dataIndex: "stuId" },
  { title: "班级", dataIndex: "classs" },
  { title: "邮箱", dataIndex: "email" },
  {
    title: "操作",
    dataIndex: "action",
    render: ({ record }) => {
      return (
        <a-button
          type="primary"
          onClick={() => del(record.id)}
          size="small"
          status="danger"
        >
          删除
        </a-button>
      );
    },
  },
];
const fileId = ref();

const fileData = ref(null);

const users = ref([]);

const getUsers = async () => {
  const res = await findUsers();
  users.value = res.data;
};

const upload = async () => {
  const fromdata = new FormData();
  fromdata.append("file", fileId.value.files[0]);
  const res = await importExcel(fromdata);
  if (res.success) {
    await getUsers();
  }
};

const del = async (id) => {
  const res = await delUser({ id });
  if (res.success) {
    getUsers();
  }
};

onMounted(() => {
  getUsers();
});
</script>

<style lang="scss" scoped></style>
